<template >
  <div class="container">
    <el-dialog
      title="题目预览"
      :visible.sync="showDialog"
      width="53%"
      :before-close="closeDialog"
      :close-on-click-modal="false"
    >
      <div class="el-row-one">
        <el-row>
          <el-col :span="6">
            <div>【题型】：{{ enumPreviewItem.questionType||previewItem.questionType }}</div>
          </el-col>
          <el-col :span="6">
            <div>【编号】：{{ previewItem.id }}</div>
          </el-col>
          <el-col :span="6">
            <div>【难度】：{{ enumPreviewItem.difficulty|| previewItem.difficulty}}</div>
          </el-col>
          <el-col :span="6">
            <div>【标签】：{{ previewItem.tags }}</div>
          </el-col>
        </el-row>
      </div>
      <div class="el-row-one">
        <el-row>
          <el-col :span="6">
            <div>【学科】：{{ previewItem.subjectName }}</div>
          </el-col>
          <el-col :span="6">
            <div>【目录】：{{ previewItem.directoryName }}</div>
          </el-col>
          <el-col :span="6">
            <div>【方向】：{{ previewItem.direction }}</div>
          </el-col>
        </el-row>
      </div>
      <hr />

      <div class="el-row-one" v-if="previewItem.questionType === '3'||previewItem.questionType === '简答'">
        <div style="margin-top: 15px">【题干】：</div>
        <div class="question-stem" v-html="previewItem.question"></div>
        <hr />
      </div>

      <div class="el-row-three" v-if="previewItem.questionType === '1'||previewItem.questionType === '单选'">
        <div>【题干】：</div>
        <div class="question-stem" v-html="previewItem&&previewItem.question"></div>
        <div style="margin-top: 15px">
          单选题 选项：（以下选中的选项为正确答案）
        </div>
        <div style="margin-top: 15px">
          <el-radio-group v-model="Answer" @change="changeRadio">
            <div v-for="item in previewItem.options" :key="item.id">
              <el-radio :label="item.isRight">{{ item.title }}</el-radio>
            </div>
          </el-radio-group>
        </div>
        <hr />
      </div>

      <div class="el-row-one" v-if="previewItem.questionType === '2'||previewItem.questionType === '多选'">
        <div style="margin-top: 15px">【题干】：</div>
        <div class="question-stem" v-html="previewItem.question"></div>
        <div style="margin-top: 15px">
          多选题 选项：（以下选中的选项为正确答案）
        </div>
        <div style="margin-top: 15px">
          <el-row v-for="item in options" :key="item.id">
            <el-checkbox
              v-model="item.isRight"
              :disabled="item.isRight === 0"
              @change="changeCheck(item)"
              >{{ item.title }}</el-checkbox
            >
          </el-row>
        </div>
        <hr />
      </div>

      <div class="el-row-one">
        【参考答案】：
        <el-button type="danger" @click="showVideo = true"
          >视频答案预览</el-button
        >
        <div v-if="showVideo">
          <meta name="referrer" content="never" />
          <video
            class="question-video"
            :src="previewItem.videoURL"
            controls
          ></video>
        </div>
      </div>
      <hr />
      <div class="el-row-one question-detail">
        <span>【答案解析】：</span><span v-html="previewItem.answer"></span>
      </div>
      <hr />
      <div class="el-row-two">【题目备注】：{{ previewItem.remarks }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDialog">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      Answer: 1,
      showVideo: false,
      videoSrc: 'https://www.bilibili.com/video/BV14J411P7Tx?share_source=copy_web&vd_source=d388695cc7982173735c35de8b51e75f'
    }
  },
  name: 'randomspreview',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    previewItem: {
      type: Object,
      default: () => {}
    },
    enumPreviewItem: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    // 关闭dialog
    closeDialog () {
      this.$emit('close')
      this.showVideo = false
    },
    // 单选
    changeRadio () {
      this.Answer = 1
    },
    // 多选
    changeCheck (item) {
      if (item.isRight) {
        console.log(item.isRight)
      } else {
        item.isRight = true
      }
    }
  },
  computed: {
    options () {
      // 遍历传递过来的题目选项 如果isRight===1 代表该选项是被选中的选项
      this.previewItem.options.forEach((element) => {
        if (element.isRight === 1) {
          // 将这一项的isRight改为true 多选框就会默认选择
          element.isRight = true
        }
      })
      // 修改完成之后
      return this.previewItem.options
    }
  }
}
</script>

<style scoped lang='scss'>
.el-row-one {
  margin: 20px 0;
}
.el-row-two {
  margin-top: 20px;
}
.el-row-three {
  margin-top: 20px;
}
::v-deep .el-radio,
.el-checkbox {
  display: block;
  margin-bottom: 15px;
}
.question-stem {
  color: #0000ff;
  margin-top: 15px;
  margin-bottom: 15px;
}
.question-detail {
  span {
    display: inline-block;
  }
}
.question-video {
  width: 400px;
}
</style>
